<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>疫情监控</title>
    <link href="../static/css/main.css" rel="stylesheet"/>
    <script src="../static/js/jquery-1.11.1.min.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
    <script src="../static/js/echarts-wordcloud.min.js"></script>
</head>
<body onresize="refreshPage()">
<div id="gyroContain">
    <div id="title">新冠疫情实时追踪</div>
    <div id="tim"></div>
    <div id="l1">我是左1</div>
    <div id="l2">
        <div class="title">中高风险地区</div>
        <div class="ts"></div>
        <div id="risk_wrapper">
            <div id="risk_wrapper_li1">
                <ul>
                </ul>
            </div>
            <div id="risk_wrapper_li2"></div>
        </div>
    </div>
    <div id="c1">
        <div class="num"><h1></h1></div>
        <div class="num"><h1></h1></div>
        <div class="num"><h1></h1></div>
        <div class="num"><h1></h1></div>
        <div class="txt"><h2>累计确诊</h2></div>
        <div class="txt"><h2>现有确诊</h2></div>
        <div class="txt"><h2>累计治愈</h2></div>
        <div class="txt"><h2>累计死亡</h2></div>
    </div>
    <div id="c2">我是中2</div>
    <div id="r1">我是右1</div>
    <div id="r2">我是右2</div>
</div>
</body>
<script>
    //显示当前时间
    function showTime() {
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var second = date.getSeconds()
        if (hour < 10) {
            hour = "0" + hour
        }
        if (minute < 10) {
            minute = "0" + minute
        }
        if (second < 10) {
            second = "0" + second
        }
        var time = year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second
        $("#tim").html(time)
    }

    setInterval(showTime, 1000) //1秒调用1次,刷新时间

    //获取主数据c1
    function get_c1_data() {
        $.ajax({
            url: "/c1",
            success: function (data) {
                $(".num h1").eq(0).text(data.confirm)
                $(".num h1").eq(1).text(data.suspect)
                $(".num h1").eq(2).text(data.heal)
                $(".num h1").eq(3).text(data.dead)
            },
            error: function (data) {
                console.log("请求c1数据失败")
            }
        })
    }

    //c2区域js
    var ec_center = echarts.init(document.getElementById('c2'), "dark");

    var ec_center_option = {
        title: {
            text: '全国现有确诊',
            subtext: '',
            x: 'center',
        },

        tooltip: {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8,
            },
            splitList: [{start: 0, end: 0}, {start: 1, end: 9},
                {start: 10, end: 99},
                {start: 100, end: 999},
                {start: 1000, end: 9999},
                {start: 10000}],
            color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
        },
        //配置属性
        series: [{
            name: '现有确诊人数',
            type: 'map',
            mapType: 'china',
            roam: true, //拖动和缩放
            itemStyle: {
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#62d3ff', //区域边框颜色
                    areaColor: "#b7ffe6", //区域颜色
                },
                emphasis: { //鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#fff',
                    areaColor: "#fff",
                }
            },
            label: {
                normal: {
                    show: true, //省份名称
                    fontSize: 8,
                },
                emphasis: {
                    show: true,
                    fontSize: 8,
                }
            },
            data: [] //mydata //数据
        }]
    };
    ec_center.setOption(ec_center_option)

    function get_c2_data() {
        $.ajax({
            url: "/c2",
            success: function (data) {
                ec_center_option.series[0].data = data.data
                ec_center_option.series[0].data.push({
                    name: "南海诸岛", value: 0
                })
                ec_center.setOption(ec_center_option)
            },
            error: function (data) {
                console.log("请求c2数据失败")
            }
        })
    }

    //l1区域js
    var ec_left1 = echarts.init(document.getElementById('l1'), "dark");
    var ec_left1_Option = {
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#7171C6'
                }
            },
        },
        legend: {
            data: ['新增确诊', '新增疑似', '新增治愈', '新增死亡'],
            left: "right"
        },
        //标题样式
        title: {
            text: "本土新增趋势",
            textStyle: {
                color: 'white',
            },
            left: 'left'
        },
        //图形位置
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            //x轴坐标点开始与结束点位置都不在最边缘
            // boundaryGap : true,
            data: []
        }],
        yAxis: [{
            type: 'value',
            //y轴字体设置

            //y轴线设置显示
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
            //与x轴平行的线样式
            splitLine: {
                show: true,
                lineStyle: {
                    // color: '#FFF',
                    width: 1,
                    // type: 'solid',
                }
            }
        }],
        series: [{
            name: "新增确诊",
            type: 'line',
            smooth: true,
            data: []
        }, {
            name: "新增疑似",
            type: 'line',
            smooth: true,
            data: []
        }, {
            name: "新增治愈",
            type: 'line',
            smooth: true,
            data: []
        }, {
            name: "新增死亡",
            type: 'line',
            smooth: true,
            data: []
        }]
    };

    ec_left1.setOption(ec_left1_Option)

    function get_l1_data() {
        ec_left1.showLoading()
        $.ajax({
            url: "/l1",
            success: function (data) {
                ec_left1_Option.xAxis[0].data = data.day
                ec_left1_Option.series[0].data = data.confirm_add
                ec_left1_Option.series[1].data = data.suspect_add
                ec_left1_Option.series[2].data = data.heal_add
                ec_left1_Option.series[3].data = data.dead_add
                ec_left1.setOption(ec_left1_Option)
                ec_left1.hideLoading()
            },
            error: function (data) {
                console.log("请求l1数据失败")
            }
        })
    }

    //l2区域js
    function start_roll() {
        var speed = 30; // 可自行设置文字滚动的速度
        var wrapper = document.getElementById('risk_wrapper');
        var li1 = document.getElementById('risk_wrapper_li1');
        var li2 = document.getElementById('risk_wrapper_li2');
        li2.innerHTML = li1.innerHTML //克隆内容
        function Marquee() {
            if (li2.offsetHeight - wrapper.scrollTop <= 0) //当滚动至demo1与demo2交界时
                wrapper.scrollTop -= li1.offsetHeight //demo跳到最顶端
            else {
                wrapper.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left
            }
        }

        var MyMar = setInterval(Marquee, speed) //设置定时器
        wrapper.onmouseover = function () {
            clearInterval(MyMar)    //鼠标移上时清除定时器达到滚动停止的目的
        }
        wrapper.onmouseout = function () {
            MyMar = setInterval(Marquee, speed)  //鼠标移开时重设定时器
        }
    }

    function get_l2_data() {
        $.ajax({
            url: "/l2",
            success: function (data) {
                var update_time = data.update_time
                var details = data.details
                var risk = data.risk
                $("#l2 .ts").html("截至时间：" + update_time)
                var s = ""
                for (var i in details) {
                    if (risk[i] == "高风险") {
                        s += "<li><span class='high_risk'>高风险\t\t</span>" + details[i] + "</li>"
                    } else {
                        s += "<li><span class='middle_risk'>中风险\t\t</span>" + details[i] + "</li>"
                    }
                }
                $("#risk_wrapper_li1 ul").html(s)
                start_roll()
            },
            error: function (data) {
                console.log("请求l2数据失败")
            }
        })
    }

    //r1区域js
    var ec_right1 = echarts.init(document.getElementById('r1'), "dark");
    var ec_right1_option = {
        //标题样式
        title: {
            text: "现有确诊人数地区TOP5",
            textStyle: {
                color: 'white',
            },
            left: 'left'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            color: 'white',
            data: []
        },
        yAxis: {
            type: 'value',
            color: 'white',
        },
        series: [{
            data: [],
            type: 'bar',
            barMaxWidth: "50%"
        }]
    };
    ec_right1.setOption(ec_right1_option)

    function get_r1_data() {
        $.ajax({
            url: "/r1",
            success: function (data) {
                ec_right1_option.xAxis.data = data.city;
                ec_right1_option.series[0].data = data.confirm;
                ec_right1.setOption(ec_right1_option);
            }
        })
    }

    //r2区域js
    var ec_right2 = echarts.init(document.getElementById('r2'), "dark");

    // var ddd = [{'name': '肺炎', 'value': '12734670'}, {'name': '实时', 'value': '12734670'},
    //     {'name': '新型', 'value': '12734670'}]
    var ec_right2_option = {
        // backgroundColor: '#515151',
        title: {
            text: "百度热搜",
            textStyle: {
                color: 'white',
            },
            left: 'left'
        },
        tooltip: {
            show: false
        },
        series: [{
            type: 'wordCloud',
            // drawOutOfBound:true,
            gridSize: 1,
            sizeRange: [12, 55],
            rotationRange: [-45, 0, 45, 90],
            // maskImage: maskImage,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' +
                            Math.round(Math.random() * 255) +
                            ', ' + Math.round(Math.random() * 255) +
                            ', ' + Math.round(Math.random() * 255) + ')'
                    }
                }
            },
            // left: 'center',
            // top: 'center',
            // // width: '96%',
            // // height: '100%',
            right: null,
            bottom: null,
            // width: 300,
            // height: 200,
            // top: 20,
            data: []
        }]
    }

    ec_right2.setOption(ec_right2_option);

    function get_r2_data() {
        $.ajax({
            url: "/r2",
            success: function (data) {
                ec_right2_option.series[0].data = data.kws;
                ec_right2.setOption(ec_right2_option);
            }
        })
    }

    $(function () {
        get_c1_data()
        get_c2_data()
        get_l1_data()
        get_l2_data()
        get_r1_data()
        get_r2_data()
    })
</script>
</html>
